WacthOS介面元素設計 佈局(指南)
Apple Watch Series 7 具有兩個新尺寸:41毫米和45毫米, 螢幕邊緣曲面設計,邊框更薄,角半徑更大。為了充分利用更大的顯示區域,設計團隊提出了三大設計原則:
A 放大了使用者介面元件,充分利用額外的空間以增強可用性。
/Untitled.png)
B 透過排版和顏色,在手錶應用中建立更清晰的層次結構。
/Untitled 1.png)
C 改進導航和路徑指引,以便在快速檢視時提供更好的位置感。
/Untitled 2.png)
UI Element 使用者介面元素
A 狀態列變得更高,底部的滾動清除邊距也變得更高。
/Untitled 3.png)
B 大標題引入,以使應用程式更易於快速瀏覽,提供更好的位置感,並在應用程式內建立更清晰的層次結構。標題在滾動時會過渡到狀態列。
/Untitled 4.png)
/Untitled 5.png)
C 顏色旨在幫助路徑指引、資訊層次,並傳達應用程式的個性。
在這個 Mindfulness 示例中,青色加強了應用的標識和體驗。並將系統灰色托盤背景色調低,以創造更柔和的效果。
列表檢視應用程式在手錶上很常見。在這個 Mail 示例中,使用藍色背景強化了你是在 Mail 應用中,而不是另一個使用類似導航模式的應用。藍色背景為標題的30%透明度。
亮黃色在視覺上將 Tips 與其他如 Workout 這樣的輪播導航應用區分開來。它還加強了 Tips 體驗在我們所有平臺上的連續性。
/Untitled 6.png)
D 滾動檢視中的按鈕採用圓角矩形,不滾動檢視中的按鈕固定在螢幕底部。Series 7 中的按鈕形狀經過精心設計,與手錶的硬體相協調。
最佳化點1: 簡化為統一的次級按鈕配色方案,並將並排按鈕從分裂膠囊切換到並膠囊形狀。
左側為可滾動螢幕的按鈕造型,右側為固定螢幕的按鈕。
最佳化前:
/Untitled 7.png)
最佳化後:
/Untitled 8.png)
/Untitled 9.png)
按鈕高度不變,所以現有 UI 不需要更新佈局就能使用這些新按鈕。
/Untitled 10.png)
/Untitled 11.png)
最佳化點2:精心設計的按鈕形,讓固定在螢幕底部的按鈕的曲率與手錶硬體和諧統一。
最佳化前:
/Untitled 12.png)
最佳化後
/Untitled 13.png)